<template>
  <div >
    <div  id="myChart" :style="{width: '550px', height: '350px',}"></div>
  </div>
</template>
<script>
var that = this;
export default {
  data() {
    return {
      datax: [
        {value: 535, name: 'A区'},
        {value: 510, name: 'B区'},
        {value: 634, name: 'C区'},
        {value: 735, name: 'D区'},
        {value: 520, name:'E区'}
      ],
      communities:['A区', 'B区', 'C区', 'D区', 'E区'],
    };
  },
  mounted() {
    this.drawLine(); //按照默认值预先绘制图表
  },
  created() {
    this.$axios.get("drawLineChart1").then(res=>{
      if (res.data.statusCode == 200) {
        this.datax.length = 0; //数组清空
        this.communities.length=0;
        for (let i = 0; i < res.data.data.length; i++) {
           this.datax.push(res.data.data[i]);
          this.communities.push(res.data.data[i].name);
        }
        console.log(this.datax);
      }
    });
  },
  watch: {
    datax: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        //do something
        this.drawLine();
      },
      deep: true,
    },
  },
  methods: {
    drawLine() {
      
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      //2、构造图表数据
      let options = {
  title: {
        text: '小区人数统计',
         subtext: '(人)',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 0,
        data:this.communities
    },
    color:['#27c24c','#f05050','#23b7e5','#7266ba','#18bc9c'],
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['44%', '60%'],
            selectedMode: 'single',
            data:this.datax,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    
};

      // 3、绘制图表

      myChart.setOption(options);
    },
  },
};
</script>
<style scoped>
</style>